<template>
<div class="container">
  <div class="items-wrap">
    <div class="mobile item active" v-if="$route.query.mobile">
      <div class="item-l">
        <span>手机短信</span>
      </div>
      <div class="item-r">
        <div class="tel-box" v-show="showMobile">
          <span v-text="mobile">18617358749</span>
          <i @click="edit(1)"></i>
        </div>
        <input type="text" name="tel" placeholder="请输入手机" 
        v-show="!showMobile"
        v-model="mobile"
        @blur="edit(1)">
        
      </div>
    </div>

    <div class="email item active" v-if="$route.query.email">
      <div class="item-l">
        <span>邮箱</span>
      </div>
      <div class="item-r">
        <div class="tel-box" v-show="showEmail">
          <span v-text="email">wuzhi892@qq.com</span>
          <i @click="edit(2)"></i>
        </div>
        <input type="text" name="mail" placeholder="请输入邮箱"
        v-show="!showEmail"
        v-model="email"
        @blur="edit(2)">
        
      </div>
    </div>

  </div>

  <a href="javascript:;" class="save" @click="save()">保存</a>
  <!-- 错误提示框 -->
  <div class="alert-box" v-text="alertInfo.text" v-show="alertInfo.isAlert"></div>

</div>

</template>

<script>
import Api from '@/service';
export default {
  name: 'Modify',
  data () {
    return {
      mobile: this.$route.query.mobile,
      showMobile: true,
      email: this.$route.query.email,
      showEmail: true,
      alertInfo: {
        isAlert: false,
        text: ''
      }
      
    }
  },
  methods: {
    edit(i){
      if(i==1){
        if(!this.showEmail){
          this.showEmail = !this.showEmail;
        }
        this.showMobile = !this.showMobile;

      }else {
        if(!this.showMobile){
          this.showMobile = !this.showMobile;
        }
        this.showEmail = !this.showEmail;
      }
    },
    alert(_txt){
      let _self = this;
      this.alertInfo.isAlert=true;
      this.alertInfo.text = _txt;
      setTimeout(function(){
        _self.alertInfo.isAlert=false;
      },1500);
    },
    save(){
      this.showMobile = true;
      this.showEmail = true;

      if(this.$route.query.mobile){
        if(String.trim(this.mobile) ==''){
          console.log('111')
          this.alert("电话不能为空!");
          return false;
        }
        if(!/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(this.mobile)){
          this.alert("电话格式不正确！");
          return false;
        }
      }

      if(this.$route.query.email){
        if(String.trim(this.email) ==''){
          this.alert("邮箱不能为空!");
          return false;
        }
        if(!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.email)){
          this.alert("邮箱格式不正确!");
          return false;
        }
      }
      // 保存数据
      Api.sm.saveInfo(this.mobile,this.email,"7dqj7l4DUDgaAI2ysfZiXoeZlxXZZyRoE5Z0j1moya0*").then(response => {
        if(response.data.info.updateFlag){
          this.alert("保存成功!");
        }
      });

      setTimeout(()=>{
        this.$router.push({path:'/OrderDetail',query:{orderId:this.$route.query.orderId}});
      },1000);

    }

  },
  created: function(){

  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: calculateRem(70px);
  .items-wrap{
    background: white;
    width: 100%;
    height: auto;
    .item{
      width: 100%;
      height: calculateRem(50px);
      line-height: calculateRem(50px);
      box-sizing: border-box;
      border-bottom: 1px solid #F5F8FA;
      padding: 0 calculateRem(16px);
      &:last-child{
        border-bottom: 0;
      }
      .item-l{
        width: 35%;
        float: left;
        height: calculateRem(50px);
        >span{
          font-size: calculateRem(15px);
          color: #4A5359;
          &:before{
            content: '';
            display: inline-block;
            width: calculateRem(20px);
            height: calculateRem(20px);
            background: url('../assets/images/affirm_noselect_icon.png') no-repeat;
            background-size: 100%;
            vertical-align: middle;
            margin-right: calculateRem(6px);
          }
        }

      }
      .item-r{
        width: 65%;
        float: right;
        height: calculateRem(50px);
        text-align: right;
        .tel-box{
          /*display: none;*/
          >span{
            font-size: calculateRem(16px);
            color: #000F19;
          
          }
          >i{
            display: inline-block;
            width:calculateRem(18px);
            height:calculateRem(18px);
            background: url('../assets/images/editor-normal@2x.png') no-repeat;
            background-size: 100%;
            vertical-align: text-bottom;
            margin-left: 2px;
            margin-top: 15px;
            &:active{
              background: url('../assets/images/editor-press@2x.png') no-repeat;
              background-size: 100%;

            }
          }
        }
        >input[name='tel'],>input[name='mail']{
          // display: none;
          width: 80%;
          height: calculateRem(38px);
          line-height: calculateRem(38px);
          margin-top: 6px;
          border: none;
          color: #000F19;
          outline: none;
          text-align: right;
          font-size: calculateRem(16px);

        }
        
        
      }
    }

    .active{
      .item-l{
        >span{
          &:before{
            background: url('../assets/images/affirm_select_icon.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }

  }

  .save{
    display: block;
    /*width: clac(100% -20px);*/
    /*margin-left: 10px;*/
    width: 92%;
    margin-left: 4%;
    box-sizing: border-box;
    height: calculateRem(50px);
    line-height: calculateRem(50px);
    border-radius: 5px;
    background: #E62622;
    margin-top: calculateRem(16px);
    text-align: center;
    color: white;
    font-size: calculateRem(19px);
    &:active{
      background: #C51B0D;
    }
  }

  .alert-box{
    position: fixed;
    z-index: 1000;
    max-width: 86%;
    width: auto;
    height: calculateRem(40px);
    font-size: calculateRem(16px);
    line-height: calculateRem(40px);
    transform: translate(-50%,0);
    left: 50%;
    padding: 0 calculateRem(8px);
    background: rgba(0,0,0,.7);
    top: 18vh;
    border-radius: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    // display: none;
  }
}
</style>
